<template>
  <div class="modalbox" v-if="visable">
    <div class="box">
      <div class="top"><span>提示</span><span @click="openClose">X</span></div>
      <div class="middle">这是一段文字</div>
      <div class="bottom">
        <div class="btns">
          <button>取消</button>
          <button>确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    };
  },
  methods:{
    openClose(){
      // this.$props.visable=false
      // this.$emit('close',false)
      this.$emit('update:visable',false)
    }
  },
  props:{
    visable:{
      type:Boolean,
      defalult:false,
      required:true  
    }
  },
  created(){

  }
};
</script>

<style lang="scss" scoped>
.modalbox {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba($color: #000000, $alpha: 0.2);
  display: flex;
  justify-content: center;
  padding-top: 200px;
  .box {
    padding: 10px;
    width: 300px;
    height: 100px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .top{
      display: flex;
      justify-content: space-between;
    }
    .bottom{
      display: flex;
      justify-content: right;
    }
  }
}
</style>